<template>
  <div v-loading="loading" class="list-page">
    <div class="content" v-if="list.length">
      <div v-for="(item, index) in list" :key="index" class="dynamic-item">
        <div class="item" @click="jump(item.associationPartyId)">
          <el-card shadow="hover">
            <div>
              <img
                v-if="item.partyCover"
                :src="$store.state.baseUrl + item.partyCover"
                alt=""
              />
              <img v-else src="@/assets/default.jpg" alt="" />
              <div class="info">
                <p class="titel">{{ item.partyTitle }}</p>
                <p class="time">{{ item.publishTime | formatTime }}</p>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div v-else class="notData"><span v-if="!loading">暂无数据</span></div>
    <el-pagination
      v-if="list.length"
      class="pagination"
      background
      @current-change="handleCurrentChange"
      :page-size="pageParams.pageSize"
      layout="prev, pager, next, jumper"
      :total="count"
    >
    </el-pagination>
  </div>
</template>
<script >
import api from "@/api/modules/home.js";
export default {
  data() {
    return {
      loading: true,
      list: [],
      count: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 8,
      },
    };
  },
  mounted() {
    this.getData(this.pageParams);
  },
  methods: {
    getData(params) {
      api.getPartyPage(params).then((res) => {
        this.list = res.data;
        this.count = res.count;
        setTimeout(() => {
          this.loading = false;
        });
      });
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val;
      this.getData(this.pageParams);
    },
    jump(id) {
      console.log(id);
      this.$router.push(`/ConstructionDetail/${id}`);
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  margin: 64px 0;
  display: flex;
  flex-wrap: wrap;
}
</style>